<template>
  <!-- 菜单列表 -->
  <!-- 新增 -->
  <el-card class="box_card_add">
    <div class="add_btn">
      <div class="add_icon">
        <el-icon><Tickets /></el-icon><span>数据列表</span>
      </div>
      <el-button type="primary">添加</el-button>
    </div>
  </el-card>
  <!-- 表格 -->
  <el-table :data="list" border size="small" table-layout="auto">
    <el-table-column label="编号" prop="id" align="center" />
    <el-table-column label="菜单名称" prop="title" align="center" />
    <el-table-column label="菜单级数" prop="level" align="center">
      <template #default="{ row }">{{ row.level ? '二级' : '一级' }}</template>
    </el-table-column>
    <el-table-column label="前端名称" prop="name" align="center" />
    <el-table-column label="前端图标" align="center">
      <template #default="{ row }"><i class="iconfont" :class="row.icon"></i></template>
    </el-table-column>
    <el-table-column label="是否显示" align="center">
      <!-- 开关 -->
      <template #default="{ row }"><el-switch v-model="row.hidden" :active-value="0" :inactive-value="1" @change="updateHidden(row.id, row.hidden)" /></template>
    </el-table-column>
    <el-table-column label="排序" prop="sort" align="center" />
    <el-table-column label="设置" align="center">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="lookChild(row.id)">查看下级</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination
    background
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { menu } from '@/request/api'
import { ElMessage } from 'element-plus'
import { Tickets } from '@element-plus/icons-vue'
import { useTable } from '@/hooks/component/useTable'

// 对一些组件公用的属性和方法进行封装
// 当前页详细数据、当前第几页、一页多少条数据、数据总数、搜索框
const { list, pageNum, pageSize, total, handleSizeChange, handleCurrentChange, lookChild } = useTable(menu.APIMenuList, undefined)

// 是否显示
const updateHidden = async (id: number, hidden: number) => {
  let res = await menu.APIMenuUpdateHidden({ hidden }, id)
  if (res.code === 200) {
    ElMessage.success('状态修改成功！')
  } else {
    ElMessage.error('状态修改失败！')
  }
}
</script>

<style lang="less" scoped>
// 新增
.box_card_add {
  margin: 20px 0;
  font-size: 14px;
  .add_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add_icon {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
      }
    }
    button {
      margin-left: 20px;
      padding: 9px 15px;
      font-size: 12px;
    }
  }
}
// 表格
.el-table {
  i {
    color: #000;
    &::before {
      margin-right: 0;
    }
  }
}
// 分页器
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
